<template>
  <div class="header">
    <div v-if="!isLogin">
      <router-link to="/login">
        <div class="header_menu">登录</div>
      </router-link>
    </div>
    <div v-else>
      <router-link to="{ path: '/userInfo', {id: id}">
        <div class="header_menu">{{ userName }}已登录</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      userName: ''
    }
  },
  created() {
    let token = localStorage.getItem('token')
    if (token) {
      this.isLogin = true;
      this.userName = localStorage.getItem('userName');
      this.id = localStorage.getItem("_id")
    } else {
      console.log('用户登录失败')
    }
  }
}
</script>

<style lang="css" scoped>
.header {
  width: 103%;
  height: 60px;
  left: 0;
  top: 0;
  color: #000;
  background-color: #c3bd5c;
}

.header_menu {
  padding-right: 60px;
  padding-top: 10px;
  float: right;
  color: #fff;
  font-size: 18px;
}
</style>
